import { t } from 'i18next'
import { fetchGetNameCardInfo } from '@/api/index'
import Icon from '@/components/Icon'
import { useRequest, useUnmountedRef } from 'ahooks'
import React, { useState, useEffect, forwardRef } from 'react'
import { PopupUserInfo } from '../interfaces/meeting'
import { PopupWinUserStyle } from './style/popupUserWin'
import { Utils } from './utils'
/*
组件使用

<Trigger
	key={index}
	trigger="hover"
	popup={<PopupUserWin moid={mt.moid} key={index}></PopupUserWin>}
/>
hover到头像展示的弹窗
*/
const PopupUserWin = forwardRef((props: any, ref: any) => {
	/*
	useUnmountedRef — 获取当前组件是否已经卸载的 hook，用于避免因组件卸载后更新状态而导致的内存泄漏
	*/
	const unmountedRef = useUnmountedRef()
	/*
	export class PopupUserInfo {
		depts: Dept[]
		e164: string
		email: string
		isShow: number
		location: string
		mobilePhone: string
		moid: string
		mugshot128: string
		name: string
		portrait32: string
		portrait64: string
		portrait128: string
		workPhone: string
		personalBriefly: string
		accountType?: number
		constructor() {
			//构造函数初始化了所有属性。
			this.depts = []
			this.e164 = ''
			this.email = ''
			this.isShow = 0
			this.location = ''
			this.mobilePhone = ''
			this.moid = ''
			this.mugshot128 = ''
			this.name = ''
			this.portrait32 = ''
			this.portrait64 = ''
			this.portrait128 = ''
			this.workPhone = ''
			this.personalBriefly = ''
			this.accountType = 0
		}
	}

	*/
	const [userInfo, setUserInfo] = useState(new PopupUserInfo())
	/*
	useRequest

	*/
	const { run } = useRequest(() => fetchGetNameCardInfo(props.moid), {
		/*
		防抖：设置debounceWait，值为时间（单位ms），频繁触发run函数，只在最后一次触发结束后等待该时间再执行。
		*/
		debounceWait: 200,
		/*
		manual 默认为自动请求，返回data值；设置options.manual=true，通过返回的run()/runAsync()手动触发请求。
		*/
		manual: true,
		// onSuccess 请求成功时的处理逻辑
		onSuccess: (data) => {
			// 当组件未卸载才能设置数据
			if (data && !unmountedRef.current) {
				setUserInfo(data)
			}
		},
	})
	useEffect(() => {
		run()
	}, [props, props.meetingMoid, props.moid])
	var mugshot =
		userInfo.portrait128 && userInfo.portrait128 !== ''
			? userInfo.portrait128
			: Utils.getDefaultAvatarURL(userInfo.accountType || 0, 128)
	var jobObj = Utils.getJobObj(userInfo.depts)
	var desc = ''
	if (userInfo.personalBriefly !== '') {
		// desc = Utils.code.encodeHTML(userInfo.personalBriefly)
		desc = userInfo.personalBriefly
	}
	var tel = ''
	if (userInfo.workPhone.indexOf('--') === 0) {
		tel = userInfo.workPhone.replace('--', '')
	} else {
		tel = userInfo.workPhone
	}
	const onError = (e: any) => {
		var url = Utils.onErrorBySize(userInfo.accountType || 0, 128)
		e.target.src = url
	}
	return (
		<PopupWinUserStyle ref={ref} {...props}>
			<div className="user-info-left">
				{/* onError={Utils.onErrorBySize(userInfo.accountType, 128)}  */}
				<img src={mugshot} alt="" onError={(e) => onError(e)} className="border_radius" />
				<div className="left-name">{userInfo.name}</div>
			</div>
			<div className="user-info-right">
				<div className="line">
					<Icon className={'user-info-icon nc_desc_dept'}></Icon>
					<div className="line-content" title={Utils.getDeptName(userInfo.depts).name}>
						{Utils.getDeptName(userInfo.depts).name || t('未填写')}
					</div>
				</div>
				<div className="line">
					<Icon className={'user-info-icon nc_desc_pos'}></Icon>
					<div className="line-content" title={jobObj.name}>
						{jobObj.name || t('未填写')}
					</div>
				</div>
				<div className="line">
					<Icon className={'user-info-icon nc_desc_mobile'}></Icon>
					<div className="line-content" title={userInfo.mobilePhone}>
						{userInfo.mobilePhone || t('未填写')}
					</div>
				</div>
				<div className="line">
					<Icon className={'user-info-icon nc_desc_tel'} title={tel}></Icon>
					<div className="line-content">{tel || t('未填写')}</div>
				</div>
				<div className="line">
					<Icon className={'user-info-icon nc_desc_email'}></Icon>
					<div className="line-content" title={userInfo.email}>
						{userInfo.email || t('未填写')}
					</div>
				</div>
				<div className="line">
					<Icon className={'user-info-icon nc_desc_loction'}></Icon>
					<div className="line-content" title={userInfo.location}>
						{userInfo.location || t('未填写')}
					</div>
				</div>
				<div className="line">
					<Icon className={'user-info-icon nc_desc_e164'}></Icon>
					<div className="line-content" title={userInfo.e164}>
						{userInfo.e164 || t('未填写')}
					</div>
				</div>
				<div className="line">
					<Icon className={'user-info-icon nc_personal_briefly'}></Icon>
					<div className="line-content" title={desc}>
						{desc || t('暂无介绍')}
					</div>
				</div>
			</div>
		</PopupWinUserStyle>
	)
})
export default PopupUserWin
